<template>
  <div>
    <div id="main" class="top1"></div>
  </div>
</template>

<script>
// 4.9.0
import * as echarts from "echarts";
export default {
  data() {
    return {
      price_list: [],
      date_list: [],
    };
  },
  methods: {
    top1() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data:  this.date_list,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data:  this.price_list,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    // 获取数据
    echartsData() {
      this.axios.get("/get/integral").then((res) => {
        console.log("获取图片数据的响应：", res);
        this.price_list = res.data.value;
        this.date_list = res.data.key;
        console.log('>>>>',this.date_list)
        this.top1();
      });
    },
  },
  mounted() {
    this.echartsData();
  },
};
</script>

<style>
.top1 {
  width: 550px;
  height: 300px;
  margin: 0 auto;
}
</style>